<template>
  <!-- 样板间方案 -->
  <div>
    <div v-show="!showEdit">
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
      <table-box
        ref="modelRoom"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :other-raw="otherRaw"
        :off-set="-20"
        show-index
        show-selection
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="handleImportSuccess" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
    <add-plan v-if="showAdd" ref="addPlan" :visible.sync="showAdd" @success="handleEdit" />
    <add-model-room v-if="showEdit" ref="addFinishedPlan" :visible.sync="showEdit" :detail-data="activatedData" @goBack="goHome" @success="refreshTable" />
  </div>
</template>

<script>
import addModelRoom from './addModelRoom.vue'
import AddPlan from './addPlan.vue'
import { changePlanState } from '@/api/marketConstruction'
export default {
  name: 'ModelRoom',
  components: { addModelRoom, AddPlan },
  data() {
    return {
      importVisible: false,
      exportVisible: false,
      showAdd: false,
      showEdit: false,
      activatedData: [],
      searchConfig: [
        {
          label: '所属空间',
          prop: 'configSpaceId',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configSpace/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'spaceName',
              value: 'id'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属空间',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSpace/page`,
            setting: [{ prop: 'spaceCode', title: '编码' }, { prop: 'spaceName', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '所属专区',
          prop: 'configStyleId',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'styleName',
              value: 'id'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属专区',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
            setting: [{ prop: 'styleCode', title: '编码' }, { prop: 'styleName', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '户型',
          prop: 'houseType',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/HOUSE_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '户型定位',
          prop: 'houseTypePosition',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/HOUSE_TYPE_POSITION?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '大致面积', prop: 'adviceSampleArea', type: 'text', value: '', placeholder: '' },
        {
          label: '启用状态',
          prop: 'enable',
          type: 'radio',
          value: '1',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        }
      ],
      tableSelected: [],
      selectedRows: [],
      otherRaw: {},
      otherFilters: [{ 'id': 'areaCode', 'property': 'areaCode', 'operator': '=', 'value': 'Q005' },
        { 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configProgramProduct/page`,
        hideSearchBar: true,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'spaceName',
            label: '所属空间',
            minWidth: '100',
            className: 'table-handelclick-text',
            isButton: true,
            clickFun: this.checkDetail
          },
          {
            prop: 'styleDesc',
            label: '风格描述',
            minWidth: '200'
          },
          {
            prop: 'houseType',
            label: '户型',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'HOUSE_TYPE'
            }
          },
          {
            prop: 'houseTypePosition',
            label: '户型定位',
            minWidth: '100',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'HOUSE_TYPE_POSITION'
            }
          },
          {
            prop: 'adviceSampleArea',
            label: '大致面积',
            minWidth: '100'
          },
          {
            prop: 'spaceDesc',
            label: '空间说明',
            minWidth: '100'
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '100',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: [{
          buttonName: '新增',
          optCode: 'add',
          outerFlag: true
        },
        {
          buttonName: '编辑',
          optCode: 'edit',
          outerFlag: true
        },
        {
          buttonName: '启用',
          optCode: 'enable',
          outerFlag: true
        },
        {
          buttonName: '停用',
          optCode: 'unable',
          outerFlag: true
        },
        {
          buttonName: '导入',
          optCode: 'import',
          outerFlag: true
        },
        {
          buttonName: '导出',
          optCode: 'export',
          outerFlag: true
        }]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '样板间方案配置',
        dataMethod: 'post',
        dataApi: `/slm-admin/api/v1/configProgramProduct/exportModel?type=0`,
        selectedRows: this.selectedRows,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'mainId'
      },
      {
        code: 'exportTemplate',
        name: '样板间方案配置模板',
        async: false,
        templateMethod: 'post',
        templateApi: `/slm-admin/api/v1/configProgramProduct/exportModel?type=1`
      }]
    },
    fileImportConfig() {
      return [{
        code: 'importNew',
        name: '新增样板间方案配置',
        async: false,
        apiUrl: `/slm-admin/api/v1/configProgramProduct/importModel?type=1`
      },
      {
        code: 'importUpdate',
        name: '修改样板间方案配置',
        async: false,
        apiUrl: `/slm-admin/api/v1/configProgramProduct/importModel?type=0`
      }]
    }
  },
  created() {},
  activated() {},
  methods: {
    // 搜索
    handleSearch(data) {
      const otherFilter = [{ 'id': 'areaCode', 'property': 'areaCode', 'operator': '=', 'value': 'Q005' }]
      this.otherFilters = [...otherFilter, ...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.modelRoom.initTableData()
      })
    },
    // 清空搜索
    clearSearch(data) {
      const otherFilter = [{ 'id': 'areaCode', 'property': 'areaCode', 'operator': '=', 'value': 'Q005' }]
      this.otherFilters = [...otherFilter]
      this.otherRaw = {}
    },
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleAdd()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', false)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'unable':
          this.handleChangeStatus(0)
          break
        case 'enable':
          this.handleChangeStatus(1)
          break
        case 'export':// 导出
          this.exportVisible = true
          break
        case 'import':// 导出
          this.importVisible = true
          break
        default:
          break
      }
    },
    // 新增
    handleAdd() {
      this.showAdd = true
    },
    // 编辑
    handleEdit(data) {
      this.activatedData = {}
      if (data) {
        this.activatedData.id = data.id
        this.activatedData.flag = 'edit'
      }
      this.showEdit = true
    },
    // 启用:1/停用:0  state停启用状态
    handleChangeStatus(state) {
      if (!this.tableSelected.length) {
        this.$message.warning(`请选择【${state ? '启用' : '停用'}】项`)
        return
      }
      const tmpArr = this.tableSelected.filter(row => row.enable === state)
      if (tmpArr.length > 0) {
        this.$message.warning(`当前所选分类包含${state ? '启用' : '停用'}状态，请勿重复操作`)
        return
      }
      this.$confirm(`此操作将当前所选数据${state ? '启用' : '停用'},是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableSelected.forEach(item => {
          item.enable = state
        })
        changePlanState(this.tableSelected).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      })
    },
    // 导入成功
    handleImportSuccess() {
      this.refreshTable()
    },
    // 详情
    checkDetail(data) {
      this.activatedData.id = data.id
      this.activatedData.flag = 'detail'
      this.showEdit = true
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.modelRoom.initTableData(isInit ? '' : 'onPage')
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
      const arr = rows
      arr.forEach(item => {
        item.mainId = item.id
      })
      this.selectedRows = arr
    },
    goHome(isInit) {
      this.showEdit = false
      this.$refs.modelRoom.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
